<template>
  <transition name="">
    <div class="store-describe">
      <v-header
        title="店家概况"
        :fixed="true"
        :headerBg="headerBg"
        fontColor="#000">
      </v-header>

      <scroll ref="scroll">
        <div class="storeWrapper">
            <!-- 店家概况 -->
            <div class="store" :style="styles">
                <span>店家概况</span>
            </div>
            <div class="storeAll" v-html="contentHTML" v-images-loaded="imageLoaded">
            </div>
            <div v-show="noDataWrapper" style="text-align: center; margin-top: 25%;" @click="getRefresh()">
              <h4>喔噢~，没有数据</h4>
                 <p style="margin-top: 7px;">点击刷新</p>
            </div>
            <div class="bottomDiv">
            </div>
        </div>
      </scroll>
    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import imagesLoaded from 'vue-images-loaded'
import axios from '@/api/axiosApi'
import { isIOS, isIphoneX } from '@/assets/js/brower'
import { Rater, Tab, TabItem, TransferDom, Popup, Grid, GridItem } from 'vux'
import headerBg from '@/assets/img/cart_headerBg.png'

export default {
  data () {
    return {
      contentHTML: '',
      styles: {},
      noDataWrapper: false,
      headerBg
    }
  },
  directives: {
    TransferDom,
    imagesLoaded
  },
  components: {
    VHeader, Scroll, Rater, Tab, TabItem, Popup, Grid, GridItem, isIOS, isIphoneX
  },
  mounted () {
    this.$refs.scroll.$el.style.height = (window.innerHeight - this.$refs.scroll.$el.offsetTop) + 'px'
  },
  created () {
    this.isMarginTop()
    this._getDetail()
  },
  methods: {
    isMarginTop () {
      if (isIphoneX()) {
        this.styles.marginTop = 80 + 'px'
      } else {
        this.styles.marginTop = 70 + 'px'
      }
    },
    back () {
      this.$router.go(-1)
    },
    _getDetail () {
      axios.get(this, `/v1/contentDesc/${this.$route.params.contentId}`, null, (data) => {
        if (data !== null) {
          this.contentHTML = data.contentHtml
        } else {
          this.noDataWrapper = true
        }
        // 处理加载图片中不可滚动
        setTimeout(() => {
          this.$refs.scroll.scroll.refresh()
        }, 200)
      })
    },
    getRefresh () {
      this._getDetail()
    },
    imageLoaded(instance) {
      // 处理加载图片时不可滚动
      this.$vux.loading.hide()
      this.$refs.scroll.scroll.refresh()
    }
  }
}
</script>
<style lang="stylus">
.storeAll {
  img {
      width: 100%;
    }
}
</style>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'
  .store-describe {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    padding-right 15px
    background-color: white;
    z-index: 101;
  }

.store {
    padding-top 5px
    background-color white
    padding-left 15px
    font-size $font-size-large
    color $color-theme
}

.storeAll {
    padding-left 15px
    font-size $font-size-desc
    background-color white
    color $color-text-2
}

.bottomDiv {
    height:90px;
    background-color: white
}

.storeWrapper {
  margin-top 10px
}
</style>
